<template>
	<view class="contract-statistical">
		<!-- 维保电梯start -->
		<view class="card">
			<view class="title">维保电梯-统计</view>
			<!-- <view class="title-d" style="margin-bottom: 0; font-size:28rpx;margin-top: 20rpx;">合同生效-情况-占比</view> -->
			<defaultBlock v-if="!contractMain.chartData.series.length"></defaultBlock>
			<view class="card-content">
				<view class="chart-block">
					<l-echart class="ring" ref="contractMain"></l-echart>
				</view>
				<view class="title-d" style="height:40rpx;">
					<view class="d_total">全部电梯:
						<text>{{ contractMain.count }}</text>
					</view>
					<view class="key-setting" style="flex: 1; text-align:right; color:#0091ff;"
						@click.stop="toMainDetail('contractMain')">
						详情
						<uni-icons type="forward" :size="16" color='#0091ff' style="margin-left: 4rpx;"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<!-- 维保电梯end -->

		<!-- 合同生效start -->
		<view class="card">
			<view class="title">合同生效情况-占比</view>
			<!-- <view class="title-d" style="margin-bottom: 0; font-size:28rpx;margin-top: 20rpx;">合同生效-情况-占比</view> -->
			<defaultBlock v-if="!contractTake.chartData.series.length"></defaultBlock>
			<view class="card-content">
				<view class="chart-block">

					<l-echart class="ring" ref="contractTake"></l-echart>
				</view>
				<view class="title-d" v-if="contractTake.groupRecords && contractTake.groupRecords.length > 0">
					<view class="" style="flex: 1;">合同生效明细</view>
					<view class="key-setting" style="flex: 1; text-align:right;"
						@click.stop="showKeysSelect('contractTake')">
						<uni-icons type="gear" style="margin-right: 4rpx;"></uni-icons>
						指标设置
					</view>
				</view>

				<view class="">
					<s-table v-if="contractTake.groupRecords && contractTake.groupRecords.length > 0" :title="'合同状态'"
						:toDetail="true" :defaultSort="true" :dataList="contractTake.groupRecords"
						:headers="contractTake.leaderHead" @toContractDetail="toContractDetail"></s-table>
				</view>
			</view>
		</view>
		<!-- 合同生效end -->

		<!-- 合同管理start -->
		<view class="card">
			<view class="title">合同管理情况-占比</view>
			<!-- <view class="title-d" style="margin-bottom: 0; font-size:28rpx;margin-top: 20rpx;">合同生效-情况-占比</view> -->
			<defaultBlock v-if="!contractManange.chartData.series.length"></defaultBlock>
			<view class="card-content">
				<view class="chart-block">

					<l-echart class="ring" ref="contractManange"></l-echart>
				</view>
				<view class="title-d" v-if="contractManange.groupRecords && contractManange.groupRecords.length > 0">
					<view class="" style="flex: 1;">合同管理明细</view>
					<view class="key-setting" style="flex: 1; text-align:right;"
						@click.stop="showKeysSelect('contractManange')">
						<uni-icons type="gear" style="margin-right: 4rpx;"></uni-icons>
						指标设置
					</view>
				</view>

				<view class="">
					<s-table v-if="contractManange.groupRecords && contractManange.groupRecords.length > 0" :title="'合同管理'"
						:toDetail="true" :defaultSort="true" :dataList="contractManange.groupRecords"
						:headers="contractManange.leaderHead" @toContractDetail="toContractDetail"></s-table>
				</view>
			</view>
		</view>
		<!-- 合同管理end -->

		<!-- 合同审核start -->
		<view class="card">
			<view class="title">合同审核情况-占比</view>
			<!-- <view class="title-d" style="margin-bottom: 0; font-size:28rpx;margin-top: 20rpx;">合同生效-情况-占比</view> -->
			<defaultBlock v-if="!contractToexamine.chartData.series.length"></defaultBlock>
			<view class="card-content">
				<view class="chart-block">

					<l-echart class="ring" ref="contractToexamine"></l-echart>
				</view>
				<view class="title-d" v-if="contractToexamine.groupRecords && contractToexamine.groupRecords.length > 0">
					<view class="" style="flex: 1;">合同审核明细</view>
					<view class="key-setting" style="flex: 1; text-align:right;"
						@click.stop="showKeysSelect('contractToexamine')">
						<uni-icons type="gear" style="margin-right: 4rpx;"></uni-icons>
						指标设置
					</view>
				</view>

				<view class="">
					<s-table v-if="contractToexamine.groupRecords && contractToexamine.groupRecords.length > 0"
						:title="'合同管理'" :toDetail="true" :defaultSort="true" :dataList="contractToexamine.groupRecords"
						:headers="contractToexamine.leaderHead" @toContractDetail="toContractDetail"></s-table>
				</view>
			</view>
		</view>
		<!-- 合同审核end -->

		<!-- 合同走势start -->
		<view class="card">
			<view class="title">
				<view>合同-走势</view>
				<view class="titleTime" @click="clickDateBtn('contractTrend')">
					<text v-if="contractTrend.dateType < 4">{{
						['今天', '近7天', '近30天'][contractTrend.dateType - 1]
					}}</text>
					<text v-else>{{
						contractTrend.startTime.replace(/[-]/g, '/') + '-' +
						contractTrend.endTime.replace(/[-]/g, '/')
					}}</text>

					<uni-icons size="20rpx" type="forward" style="margin-left: 2rpx;" color="#999"></uni-icons>
				</view>
			</view>

			<view style="width: 100%;height: 220px;">
				<l-echart ref="contractTrend"></l-echart>
			</view>
			<!-- </view> -->
		</view>
		<!-- 合同走势end -->

		<!-- 合同来源start -->
		<view class="card">
			<view class="title">
				<view>合同来源情况-占比</view>
				<view class="titleTime" @click="clickDateBtn('contractSource')">
					<text v-if="contractSource.dateType < 4">{{
						['今天', '近7天', '近30天'][contractSource.dateType - 1]
					}}</text>
					<text v-else>{{
						contractSource.startTime.replace(/[-]/g, '/') + '-' +
						contractSource.endTime.replace(/[-]/g, '/')
					}}</text>

					<uni-icons size="20rpx" type="forward" style="margin-left: 2rpx;" color="#999"></uni-icons>
				</view>
			</view>
			<!-- <view class="title-d" style="margin-bottom: 0; font-size:28rpx;margin-top: 20rpx;">合同生效-情况-占比</view> -->
			<defaultBlock v-if="!contractSource.chartData.series.length"></defaultBlock>
			<view class="card-content">
				<view class="chart-block">

					<l-echart class="ring" ref="contractSource"></l-echart>
				</view>
				<view class="title-d" v-if="contractSource.groupRecords && contractSource.groupRecords.length > 0">
					<view class="" style="flex: 1;">合同来源明细</view>
					<view class="key-setting" style="flex: 1; text-align:right;"
						@click.stop="showKeysSelect('contractSource')">
						<uni-icons type="gear" style="margin-right: 4rpx;"></uni-icons>
						指标设置
					</view>
				</view>

				<view class="">
					<s-table v-if="contractSource.groupRecords && contractSource.groupRecords.length > 0" :title="'合同管理'"
						:toDetail="true" :defaultSort="true" :dataList="contractSource.groupRecords"
						:headers="contractSource.leaderHead"
						@toContractDetail="toContractDetail($event, 'contractSource')"></s-table>
				</view>
			</view>
		</view>
		<!-- 合同来源end -->

		<!-- 日期筛选 -->
		<time-select :beforeToday="false" :atterToday="true" v-if="selectTimePopup" @close="closeSelectTimePopup"></time-select>
		<!-- 指标设置 -->
		<tagSelect ref="tagSelect" @success="changeTags"></tagSelect>
	</view>
</template>

<script>
import * as echarts from '@/subpages/components/lime-echart/static/echarts.min';
import LEchart from '@/subpages/components/lime-echart/components/l-echart/l-echart.vue';
import timeSelect from './components/timeSelect.vue';
import defaultBlock from './components/default.vue';
import sTable from '../components/s-table/s-table.vue';
import tagSelect from './components/tag-select.vue';
import { getNowTime } from '@/utils/utils.js';
import { getContractStatusList, getContractStatisticInfo } from '@/apis/contract.js';
import { getLastDates } from '@/utils/tools.js';
import { setPieOpt, contractPieOpt } from './maintain/chartSet.js';
export default {
	name: 'contractTotal',
	components: {
		LEchart,
		timeSelect,
		defaultBlock,
		sTable,
		tagSelect
	},
	data() {
		return {
			title: '合同',
			filter: {
				type: 1, // 统计类型 1数量，2趋势
				dateType: 2, // 日期范围 1今天，2近七天，3近30天，4自定义日期
				startTime: '',
				endTime: ''
			},
			selectTimePopup: false,
			loading: false,
			// 合同维保电梯统计
			contractMain: {
				colors: ['#6FA9FF', '#FF89A8'],
				tags: [
					{ 'name': '维保中电梯', value: 0, keys: 'enContractCount', keyp: 'enContractRatio' },
					{ 'name': '暂停维保电梯', value: 0, keys: 'overdueContractCount', keyp: 'overdueContractRatio' },
				],
				count: 0,
				linedata: {
					categories: [],
					series: [],
				},
				chartData: {
					series: [],
				},
			},
			// 合同生效
			contractTake: {
				dateType: 0,
				type: 1, // 1按组统计，2按人统计
				tags: [
					{ name: '数量', key: 'counts', unit: '次' },
					{ name: '合同占比', key: 'ratio', unit: '次' },
					{ name: '项目', key: 'buildingCounts', unit: '次' },
					{ name: '电梯', key: 'elevatorCounts', unit: '次' }
				],
				count: 0,
				linedata: {
					categories: [],
					series: []
				},
				leaderHead: [
					{
						name: '租户名称', // 表头名称
						sort: false, // 是否开启该列的排序功能
						checked: true,
						width: 210, // 列宽
						key: 'name', // 显示哪个字段
						unit: '' // 单位
					},
					{
						name: '数量',
						sort: true,
						checked: true,
						width: 100,
						key: 'counts'
					},
					{
						name: '合同占比',
						sort: true,
						checked: true,
						width: 170,
						key: 'ratio',
						unit: ''
					},
					{
						name: '项目',
						sort: true,
						checked: true,
						width: 100,
						key: 'buildingCounts',
						unit: ''
					},
					{
						name: '电梯',
						sort: true,
						checked: true,
						width: 100,
						key: 'elevatorCounts',
						unit: ''
					}
				],
				chartData: {
					series: []
				},
				groupRecords: []
			},
			contractManange: this.initOption(),
			contractToexamine: this.initOption(),
			contractSource: this.initOption(),
			// 折线区域图
			contractTrend: {
				dateType: 2, // 日期范围 1今天，2近七天，3近30天，4自定义日期
				startTime: '',
				endTime: '',
				count: 0,
				lineOpts: {},
				linedata: {
					categories: [],
					series: []
				},
				chartData: {
					series: []
				}
			}
		};
	},
	props: {},
	created() {
		uni.$on('contractSource', res => {
			this.contractSource.dateType = res.dateType;
			this.contractSource.startTime = res.startTime.replaceAll('/', '-');
			this.contractSource.endTime = res.endTime.replaceAll('/', '-');
			this.getContractSourceData();
			if (res.applyToAll) {
				this.contractTrend.dateType = res.dateType;
				this.contractTrend.startTime = res.startTime.replaceAll('/', '-');
				this.contractTrend.endTime = res.endTime.replaceAll('/', '-');
				this.getContractTrendData();
			}
		});
		uni.$on('contractTrend', res => {
			this.contractTrend.dateType = res.dateType;
			this.contractTrend.startTime = res.startTime.replaceAll('/', '-');
			this.contractTrend.endTime = res.endTime.replaceAll('/', '-');
			this.getContractTrendData();
			if (res.applyToAll) {
				this.contractSource.dateType = res.dateType;
				this.contractSource.startTime = res.startTime.replaceAll('/', '-');
				this.contractSource.endTime = res.endTime.replaceAll('/', '-');
				this.getContractSourceData();
			}
		});
	},
	beforeDestroy() {
		uni.$off('contractSource');
		uni.$off('contractTrend');
	},
	mounted() {
		const dates = getLastDates(7);
		this.filter.startTime = dates.startTime;
		this.filter.endTime = dates.endTime;

		this.contractSource.startTime = dates.startTime;
		this.contractSource.endTime = dates.endTime;

		this.contractTrend.startTime = dates.startTime;
		this.contractTrend.endTime = dates.endTime;
		this.getContractMain();

		this.initStatusList();
		this.getContractTrendData();
		this.getContractSourceData();
	},
	methods: {
		setRingChart(chart) {  // 绘制环形图
			let list = this[chart].chartData.series;

			let chartData = [];
			let Total = this[chart].count;
			for (let i = 0; i < list.length; i++) {
				chartData.push({
					value: list[i].data, name: list[i].name, ratio: list[i].prec
				});
				// Total=Total+Number(list[i].data||0)
			}
			this[chart].opts = setPieOpt({ subtext: Total, color: this[chart].colors, data: chartData });
			console.log('chart', this[chart]);
			this.$nextTick(() => {
				this.$refs[chart].init(echarts, chartF => {
					// this.chartMaps[chart] = chartF 
					chartF.setOption(this[chart].opts);

					chartF.dispatchAction({
						type: 'highlight',
						seriesIndex: 0,
						dataIndex: 0
					});
					chartF.on('legendselectchanged', (e) => {
						chartF.dispatchAction({ type: 'downplay', seriesIndex: 0 }); // 处理图例点击导致选中与默认选中重叠问题
					});
					chartF.on('mouseover', (e) => {
						if (e.dataIndex !== 0) { // 当鼠标移除的时候 使默认的索引值去除默认选中
							chartF.dispatchAction({ type: 'downplay', dataIndex: 0 });
						}
					});
				});
			});
		},
		setPieChart(chart, obj = {}) {  // 绘制环形图
			let list = this[chart].tags;
			let chartData = [];
			for (let i = 0; i < list.length; i++) {
				chartData.push({
					value: list[i].value,
					name: list[i].name,
					pro: list[i].pro,
				});
			}
			this[chart].opts = contractPieOpt({ color: this[chart].colors, data: chartData, tooltips: obj.state, richWidth: 100 }, chart);
			this.$nextTick(() => {
				this.$refs[chart].init(echarts, chartF => {
					chartF.setOption(this[chart].opts);
					chartF.dispatchAction({
						type: 'highlight',
						seriesIndex: 0,
						dataIndex: 0
					});
					chartF.on('legendselectchanged', (e) => {
						chartF.dispatchAction({ type: 'downplay', seriesIndex: 0 }); // 处理图例点击导致选中与默认选中重叠问题
					});
					chartF.on('mouseover', (e) => {
						if (e.dataIndex !== 0) { // 当鼠标移除的时候 使默认的索引值去除默认选中
							chartF.dispatchAction({ type: 'downplay', dataIndex: 0 });
						}
					});
				});
			});
		},
		// 维保电梯统计
		getContractMain() {
			getContractStatisticInfo().then(res => {
				if (res.code === 200) {
					let obj = res.data || {};
					let arr = this.contractMain.tags;
					this.contractMain.count = obj.contractElevatorCount;
					for (let attr in obj) {
						arr.forEach((item, i) => {
							if (item.keys == attr) {
								arr[i].value = obj[attr];
							}
							if (item.keyp == attr) {
								arr[i].pro = obj[attr];
							}
						});
					}
					this.contractMain.chartData.series = arr;
					this.setPieChart('contractMain');
				}
			});
		},
		// 详情
		toMainDetail(type) {
			uni.navigateTo({
				url: '/subpages/statistics/mainElevator/index',
			});
		},

		// 点击日期按钮
		clickDateBtn(id) {
			uni.$emit('openTimeFilter', {
				id: id,
				dateType: this[id].dateType, // 日期范围 1今天，2近七天，3近30天，4自定义日期
				startTime: this[id].startTime,
				endTime: this[id].endTime,
				applyToAll: false
			});
		},

		getContractTrendData() {
			// this.contractTrend.linedata.series=[]
			getContractStatusList({
				beginTime: this.contractTrend.startTime + ' 00:00:00',
				endTime: this.contractTrend.endTime + ' 23:59:59'
			}).then(res => {
				const datas = res.data || {};

				let contractList = datas.contractTrendList.reverse() || [];
				let categories = [];
				let seriesArr = [
					{
						key: 'createContractCount',
						name: '新签合同',
						data: []
					},
					{
						key: 'extensionContractCount',
						name: '续签合同',
						data: []
					},
					{
						key: 'overdueContractCount',
						name: '脱保合同',
						data: []
					},
					{
						key: 'newElevatorContractCount',
						name: '新梯移交',
						data: []
					}
				];
				for (let i = 0; i < contractList.length; i++) {
					categories.push(contractList[i].date.substring(5).replace('-', '/'));
					for (let j = 0; j < seriesArr.length; j++) {
						seriesArr[j].data.push(contractList[i][seriesArr[j].key] || 0);
					}
				}

				this.contractTrend.linedata = {
					categories: categories,
					series: seriesArr
				};
				this.setLineChart('contractTrend');

				console.log('this.contractTrend', this.contractTrend);
			});
		},
		//
		getContractSourceData() {
			getContractStatusList({
				beginTime: this.contractSource.startTime + ' 00:00:00',
				endTime: this.contractSource.endTime + ' 23:59:59'
			}).then(res => {
				const datas = res.data || {};

				this.contractSource.groupRecords = [];
				this.contractSource.count = res.data.counts || 0;
				this.contractSource.chartData.series = (datas.sourceList || []).map(item => {
					this.contractSource.groupRecords.push({
						name: item.statusName.replace(/[合同]/g, ''),
						buildingCounts: item.buildingCounts,
						elevatorCounts: item.elevatorCounts,
						ratio: (Number(item.ratio) * 100).toFixed(1) + '%',
						counts: item.counts,
						status: item.status,
						showRow: false
					});
					return {
						name: item.statusName.replace(/[合同]/g, ''),
						data: item.counts,
						ratio: datas.counts,
						prec: (Number(item.ratio) * 100).toFixed(1)
					};
				});
				this.setRingChart('contractSource');
			});
		},

		// init：1 更新全部 type：2 更新对应
		initStatusList(init = 1, type = 1) {
			getContractStatusList({
				beginTime: this.filter.startTime + ' 00:00:00',
				endTime: this.filter.endTime + ' 23:59:59'
			}).then(res => {
				if (res.code === 200) {
					const datas = res.data || {};
					// 初始更新全部
					if (init === 1 && type === 1) {
						let arrKey = ['contractTake', 'contractManange', 'contractToexamine'];
						let arrKeyList = ['enableList', 'managementList', 'checkList'];
						for (let i = 0; i < arrKey.length; i++) {
							this[arrKey[i]].chartData.series = (datas[arrKeyList[i]] || []).map(item => {
								let strTable = item.statusName.replace(/[合同]/g, '');
								let str = item.statusName;
								if (arrKeyList[i] === 'managementList') {
									str = item.statusName + '合同';
								}
								if (arrKeyList[i] === 'enableList') {
									if (item.status === 3) {
										str = '服务完成合同';
										strTable = '服务完成';
									}
								}
								this[arrKey[i]].groupRecords.push({
									name: strTable,
									buildingCounts: item.buildingCounts,
									elevatorCounts: item.elevatorCounts,
									ratio: (Number(item.ratio) * 100).toFixed(1) + '%',
									counts: item.counts,
									status: item.status,
									showRow: false
								});

								return {
									name: str,
									data: item.counts,
									ratio: datas.counts,
									prec: (Number(item.ratio) * 100).toFixed(1)
								};
							});
							console.log(arrKey[i], this[arrKey[i]].chartData);
							this[arrKey[i]].count = res.data.counts || 0;
							this.setRingChart(arrKey[i]);
						}
					}
				}
			});
		},

		initOption() {
			let obj = {
				dateType: 2, // 日期范围 1今天，2近七天，3近30天，4自定义日期
				startTime: '',
				endTime: '',
				tags: [
					{ name: '数量', key: 'counts', unit: '次' },
					{ name: '合同占比', key: 'ratio', unit: '次' },
					{ name: '项目', key: 'buildingCounts', unit: '次' },
					{ name: '电梯', key: 'elevatorCounts', unit: '次' }
				],
				leaderHead: [
					{
						name: '租户名称', // 表头名称
						sort: false, // 是否开启该列的排序功能
						checked: true,
						width: 210, // 列宽
						key: 'name', // 显示哪个字段
						unit: '' // 单位
					},
					{
						name: '数量',
						sort: true,
						checked: true,
						width: 100,
						key: 'counts'
					},
					{
						name: '合同占比',
						sort: true,
						checked: true,
						width: 170,
						key: 'ratio',
						unit: ''
					},
					{
						name: '项目',
						sort: true,
						checked: true,
						width: 100,
						key: 'buildingCounts',
						unit: ''
					},
					{
						name: '电梯',
						sort: true,
						checked: true,
						width: 100,
						key: 'elevatorCounts',
						unit: ''
					}
				],
				chartData: {
					series: []
				},
				groupRecords: []
			};
			return obj;
		},

		// 图例点击隐藏table行
		legendClick(e, type = 'contractTake') {
			let legendIndex = e.legendIndex;
			let arr = this[type].groupRecords || [];
			for (let i = 0; i < arr.length; i++) {
				if (i === e.legendIndex) {
					arr[i].showRow = !arr[i].showRow;
				}
			}
			this.$forceUpdate();
		},
		// 修改筛选器
		filterFuc(key, val) {
			if (key != 'dateType' || val != 4) {
				this.filter[key] = val;
			}

			if (key == 'dateType') {
				if (val == 1) {
					// 今天
					const dates = getLastDates(0);
					this.filter.startTime = dates.startTime;
					this.filter.endTime = dates.endTime;
				}
				if (val == 2) {
					// 近七天
					const dates = getLastDates(7);
					this.filter.startTime = dates.startTime;
					this.filter.endTime = dates.endTime;
				}
				if (val == 3) {
					// 近30天
					const dates = getLastDates(30);
					this.filter.startTime = dates.startTime;
					this.filter.endTime = dates.endTime;
				}
				if (val == 4) {
					this.selectTimePopup = true;
					return;
				}
			}

			if (key == 'type') {
				if (this.filter.dateType == 1) {
					this.filterFuc('dateType', 2);
					return;
				}
			}

			this.initStatusList(1, 2);
		},
		// 自定义日期
		closeSelectTimePopup(res) {
			let start = '';
			let end = '';
			if (res) {
				console.log('自定义日期', res);

				if (res.indexOf('-') != -1) {
					const timeArr = res.split('-');
					start = timeArr[0].replaceAll('.', '-');
					end = timeArr[1].replaceAll('.', '-');
				} else {
					const time = res.replaceAll('.', '-');
					start = time;
					end = time;
				}
				const nowDay = getNowTime();
				let nowtime = new Date(nowDay).getTime();
				let starttime = new Date(start).getTime();
				let endtime = new Date(end).getTime();
				if (endtime > nowtime) {
					console.log('包含今天');
					uni.showToast({
						title: '自定义日期范围须小于今天',
						icon: 'none'
					});
					return;
				}

				this.filter.startTime = start;
				this.filter.endTime = end;
				this.filter.dateType = 4;
			} else {
			}
			this.selectTimePopup = false;
			this.initStatusList(1, 2);
		},
		// 跳转合同详情
		toContractDetail({ item, key }, dataVal) {
			console.log('跳转合同详情', item, key);
			let arrts = [
				{ name: '未生效', state: 1, type: 'contractStatus' },
				{ name: '已生效', state: 2, type: 'contractStatus' },
				{ name: '服务完成', state: 3, type: 'contractStatus' },
				{ name: '已终止', state: 4, type: 'contractStatus' },

				{ name: '待续签', state: 1, type: 'contractExtStatus' },
				{ name: '已续签', state: 2, type: 'contractExtStatus' },
				{ name: '即将到期', state: 3, type: 'contractExtStatus' },
				{ name: '已脱保', state: 4, type: 'contractExtStatus' },
				{ name: '已作废', state: 5, type: 'contractExtStatus' },

				{ name: '待审核', state: 1, type: 'status' },
				{ name: '审核通过', state: 2, type: 'status' },
				{ name: '审核不通过', state: 3, type: 'status' },

				{ name: '新签', state: 1, type: 'contractSource' },
				{ name: '续签', state: 2, type: 'contractSource' },
				{ name: '转签', state: 3, type: 'contractSource' },
				{ name: '丢失', state: 4, type: 'contractSource' },
				{ name: '夺回', state: 5, type: 'contractSource' },
				{ name: '新梯移交', state: 6, type: 'contractSource' },
				{ name: '免保转签', state: 7, type: 'contractSource' }
			];
			let obj = arrts.find(pro => item.name == pro.name);
			obj.status = item.status;
			if (obj.type === 'contractSource') {
				obj.beginTime = this.contractSource.startTime;
				obj.endTime = this.contractSource.endTime;
			}
			uni.navigateTo({
				url: '/pageModules/contractPage/contractDetail?obj=' + JSON.stringify(obj)
			});
		},
		formatterCenter(res) {
			let { ratio, name } = res;
			console.log('formatterCenter', ratio, name);
			return {
				title: res.ratio,
				subtitle: '合同总数'
			};
		},
		// 显示指标设置弹框
		showKeysSelect(key) {
			this.$refs.tagSelect.init({
				tags: this[key].leaderHead,
				key: key
			});
		},
		// 自定义表格字段
		changeTags(res) {
			console.log('自定义表格字段', res);
			this[res.key].leaderHead = res.tags;
			// this.$forceUpdate()
		},
		setLineChart(chart) {  // 绘制环形图
			let list = this[chart].linedata.series;
			let chartData = [];
			for (let i = 0; i < list.length; i++) {
				chartData.push({
					name: list[i].name,
					type: 'line',
					stack: 'Total',
					areaStyle: {},
					showSymbol: list[i].data.length <= 1 ? true : false,
					smooth: true,
					emphasis: {
						focus: 'series'
					},
					data: list[i].data
				});
			}
			this[chart].lineOpts = this.setLineOpt({ data: chartData, categories: this[chart].linedata.categories });
			this.$nextTick(() => {
				this.$refs[chart].init(echarts, chartF => {
					// this.chartMaps[chart] = chartF 
					chartF.setOption(this[chart].lineOpts);
				});
			});
		},
		// 折线区域图
		setLineOpt(data) {
			return {
				color: ['#0091FF', '#37E4EC', '#8D54EE', '#41CE78', '#FFAE38', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
				fontSize: '10',
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'line',
						label: {
							backgroundColor: '#6a7985'
						}
					},
					textStyle: {
						textShadowBlur: 1
					},
					position: function (pos, params, el, elRect, size) {
						var obj = { top: 'auto' };
						obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
						return obj;
					},
				},
				legend: {
					padding: [0, 0, 0, 0],
					bottom: '10',
					fontSize: '10',
					itemHeight: 10,
					itemWidth: 20,
					textStyle: {
						color: '#666',
						fontSize: '10'
					}
				},

				grid: {
					top: '15%',
					left: '2%',
					right: '3%',
					bottom: '15%',
					containLabel: true
				},
				xAxis: [
					{
						lineStyle: {
							type: 'dashed'// 虚线
						},
						axisLine: {
							lineStyle: {
								color: '#999'
							},
						},
						axisTick: {
							inside: true,
							lineStyle: {
								color: '#999'
							}
						},
						axisLabel: {
							textStyle: {
								color: '#999',
							},
						},
						type: 'category',
						boundaryGap: false,
						data: data.categories
					}
				],
				yAxis: [
					{

						verticalAlign: 'top',
						name: '数量',
						nameGap: 15,
						nameLocation: 'end',
						nameTextStyle: {
							color: '#999',
							align: 'center'
						},
						type: 'value',
						axisLabel: {// y轴文字的配置
							textStyle: {
								color: '#999',// Y轴内容文字颜色
							},
						},
						splitLine: {
							lineStyle: {
								type: 'dashed',
								color: 'rgba(0,0,0,0.10)',
							},
						},
					}
				],
				series: data.data
			};
		},

	}
};
</script>

<style lang="scss" scoped>
.contract-statistical {
	width: 100%;

	.card {
		background-color: #fff;
		width: calc(100% - 80rpx);
		padding: 20rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		border-radius: 8rpx;

		.title {
			font-size: 32rpx;
			border-left: 4rpx solid #ffffff;
			line-height: 32rpx;
			padding-left: 16rpx;
			color: #333333;
			font-weight: bold;
			margin-left: -19rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;

			.titleTime {
				font-size: 24rpx;
				font-weight: 400;
				color: #666666;
				padding: 11rpx 15rpx;
				border: 2rpx solid #d5d5d5;
				border-radius: 4rpx;
			}
		}

		.title-d {
			font-size: 28prx;
			border-left: 4rpx solid #ffffff;
			line-height: 28rpx;
			padding-left: 16rpx;
			color: #333333;
			font-weight: bold;
			margin-left: -19rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 18rpx;

			.d_total {
				flex: 1;
				padding-left: 60rpx;
				font-weight: 400;

				text {
					display: inline-block;
					margin-left: 10rpx;
					font-weight: 600;
					color: #333;
				}
			}

			.key-setting {
				color: #666666;
				font-size: 25rpx;
				font-weight: normal;
			}
		}

		.date-type {
			color: #666666;
			background: #f3f6f8;
			border-radius: 4rpx;
			font-size: 24rpx;
			padding: 3rpx 16rpx;
			font-weight: normal;
			display: flex;
			align-items: center;
			justify-content: center;
			letter-spacing: 1rpx;

			image {
				width: 20rpx;
				height: 20rpx;
				margin-left: 3rpx;
			}
		}

		.data-change {
			color: #0091ff;
			font-size: 24rpx;
			padding: 3rpx 0rpx;
			font-weight: normal;
			display: flex;
			line-height: 22rpx;
			align-items: center;
			justify-content: center;
			letter-spacing: 1rpx;

			image {
				width: 40rpx;
				height: 40rpx;
				padding-top: 4rpx;
				margin-right: 3rpx;
			}
		}

		.mbs-type {
			color: #666666;
			background: #f3f6f8;
			border-radius: 4rpx;
			font-size: 24rpx;
			padding: 3rpx 16rpx;
			font-weight: normal;
			display: flex;
			align-items: center;
			justify-content: center;
			letter-spacing: 1rpx;
			margin-right: 10rpx;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 3rpx;
			}
		}

		.light {
			border-left: 4rpx solid #0091ff;
		}

		.num-block {
			width: 100%;
			display: flex;
			align-items: center;
			padding: 40rpx 0;
			padding-top: 20rpx;

			.line {
				width: 2rpx;
				height: 60rpx;
				background-color: #eee;
			}

			&-item {
				flex: 1;
				text-align: center;

				.num {
					font-size: 36rpx;
					font-weight: bold;
					color: #333;
				}

				.name {
					font-size: 26rpx;
					padding-top: 5rpx;
					color: #999999;
				}
			}
		}

		.chart-total {
			width: 100%;
			display: flex;
			color: #666666;
			font-size: 28rpx;
			align-items: center;
			margin-bottom: 40rpx;

			&-count {
				flex: 1;
				text-align: center;

				text {
					color: #333;
					font-weight: bold;
				}
			}

			&-detail {
				width: 282rpx;
				text-align: right;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				color: #0091ff;
				font-size: 26rpx;

				view {
					display: flex;
					align-items: center;
					padding: 10rpx 20rpx;
					padding-right: 0rpx;
				}

				image {
					width: 25rpx;
					height: 25rpx;
					margin-left: 10rpx;
				}
			}
		}
	}

	.cardSty {
		position: sticky;
		top: 100rpx;
		left: 0;
		right: 0;
		z-index: 98;
	}

	.filter {
		width: 100%;

		&-item {
			display: flex;
			align-items: center;
			font-size: 26rpx;
			padding-top: 20rpx;

			&-label {
				width: 20%;
				color: #666666;
			}

			&-content {
				width: 80%;
				display: flex;

				.tag {
					width: 166rpx;
					text-align: center;
					// flex: 1;
					background: #f3f6f8;
					border-radius: 8rpx;
					height: 48rpx;
					line-height: 47rpx;
					font-size: 24rpx;
					color: #333;
					border: 2rpx solid #f3f6f8;
					font-weight: normal;
					transition: 0.3s all;
				}

				.tag:nth-child(2) {
					margin: 0 16rpx;
				}

				.date {
					flex: 1;
					color: #999999;
				}

				.act {
					border: 2rpx solid #0091ff;
					background-color: #eef8ff;
					color: #0091ff;
				}
			}
		}
	}

	.line-chart-unit {
		width: 98%;
		color: #999;
		font-size: 22rpx;
		display: flex;
		justify-content: space-between;
		padding: 0 1%;
	}

	.line-chart {
		width: 100%;
		height: 200px;
		display: flex;
		justify-content: center;
		align-items: center;

		.line {
			width: 100%;
			height: 200px;
		}
	}

	.chart-block {
		width: 100%;
		height: 200px;

		.ring {
			width: 100%;
			height: 200px;
		}
	}

	.data-types {
		width: 100%;
		// padding-top: 18rpx;
		padding-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		&-right {
			display: flex;
			justify-content: flex-end;
			align-items: center;
		}
	}

	.tag-block {
		width: 100%;
		display: flex;
		align-items: center;
		margin-bottom: 12rpx;

		&-item {
			color: #666666;
			background: #f3f6f8;
			font-size: 24rpx;
			margin-right: 20rpx;
			border-radius: 2rem;
			padding: 3rpx 20rpx;
		}

		.act {
			color: #0091ff;
			background: #dcf0ff;
		}
	}
}
</style>
